{% extends 'base/front_base.html' %}
{% load static %}

{% block title %}课程咨讯详情页{% endblock %}

{% block head %}
    <script type="text/javascript" src="{% static 'cyberplayer-3.4.1/videojs/video.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'cyberplayer-3.4.1/videojs/videojs-contrib-hls.js' %}"></script>
    <script type="text/javascript" src="{% static 'cyberplayer-3.4.1/videojs/videojs-contrib-hls.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'cyberplayer-3.4.1/videojs/videojs-contrib-quality-levels.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'cyberplayer-3.4.1/cyberplayer.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/course_detail.js' %}"></script>
    <link rel="stylesheet" href="{% static "css/course/course_detail.css" %}">
{% endblock %}

{% block main %}
    <div class="main">
        <div class="course-container">
            <div class="course-video-container">
                <div class="banner">
                    <div class="banner-left">
                        <p class="video-title">{{ course.title }}</p>
                        <div class="share-video-group">
                            <span>分享至：</span>
                            <a href="#"><span class="share-icon wx-share-icon"></span></a>
                            <a href="#"><span class="share-icon weibo-share-icon"></span></a>
                        </div>
                    </div>
                    <div class="buy-course-group">
                        {% if course.price > 0 %}
                            {% if buyed %}
                                <span class="free-text">已购买</span>
                            {% else %}
                                <a href="{% url 'course:course_order' %}?course_id={{ course.pk }}" class="buy-course-btn">购买课程</a>
                                <span class="price-text">￥{{ course.price }}</span>
                            {% endif %}
                        {% else %}
                            <span class="free-text">免费</span>
                        {% endif %}

                    </div>
                </div>
                {# 视频播放部分 #}
                <div class="video-container" >
                    <span hidden data-video-url="{{ course.video_url }} " data-cover-url="{{ course.cover_url }}" data-course-id="{{ course.pk }}"></span>
                    <div id="playercontainer"></div>
                </div>
            </div>
            <div class="course-detail-container">
                <div class="main-detail-container">
                    <div class="detail-item-group">
                        <p class="item-title">课程讲师</p>
                        <div class="teacher-group">
                            <img src="{{ course.teacher.avatar }}" alt="" class="avatar-group">
                            <div class="teacher-info-group">
                                <p class="author-name">{{ course.teacher.username }}</p>
                                <p class="author-identify">{{ course.teacher.jobtitle }}</p>
                            </div>
                        </div>
                        <div class="item-content">{{ course.teacher.profile }}</div>
                    </div>
                    <div class="detail-item-group">
                        <p class="item-title">课程简介</p>
                        <div class="item-content">{{ course.profile|safe }}</div>
                    </div>
                    <div class="detail-item-group">
                        <p class="item-title">帮助中心</p>
                        <div class="item-content">
                            <p>1. 购买后的课程在线可反复观看学习，视频有效期以具体课程信息为准。 </p>
                            <p>2. 课程暂不支持下载观看，均为在线观看视频。 </p>
                            <p>3. 课程一经购买，不可转让、不可退款；仅限购买账号观看。</p>
                            <p>4. 如有问题请咨询客服饭桌君： 电话：xxxxxxxxxxx 微信：xxxxxxxxxx </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}